<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>个人中心</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <style>
        html,
        body {
            width: 100%;
            min-height: 100%;
            background: #f7f7f7;
            line-height: 1;
        }
        /*列表样式*/

        .list_box {
            background-color: #fff;
            border-bottom: 1px solid #e6e6e6;
            padding: 0.5rem;
            line-height: 1.5;
        }

        .list_box .list_all_info_box .txt_box {
            font-size: 0.8rem;
            color: #333;
            text-align: justify;
            padding-top: 0.5rem
        }

        .list_box .list_all_info_box .a_box a {
            display: flex;
            align-items: center;
            margin: 0.5rem 0 0;
            padding: 0.45rem;
            background-color: #f7f7f7;
        }

        .list_box .list_all_info_box .a_box a .a_img {
            width: 2.45rem;
            margin-right: 0.45rem;
        }

        .list_box .list_all_info_box .a_box a .a_title {
            font-size: 0.6rem;
            color: #999;
        }

        .list_box .list_all_info_box .address_box {
            display: flex;
            align-items: center;
        }

        .list_box .list_all_info_box .address_box .address_img {
            width: 0.625rem;
            margin-right: 0.45rem;
        }

        .list_box .list_all_info_box .address_box .address_info {
            font-size: 0.6rem;
            color: #666;
        }

        .list_box .three_btn_box {
            display: flex;
            justify-content: space-around;
            padding: 1.5rem 0 0.6rem 0;
        }

        .list_box .three_btn_box .btn {
            display: flex;
            align-items: center;
        }

        .list_box .three_btn_box .btn img {
            width: 0.8rem;
            margin-right: 0.3rem;
        }

        .list_box .three_btn_box .btn span {
            font-size: 0.7rem;
            color: #999;
        }
        .list_img img {
          width: 2rem;
          height: 2rem;
          margin: 0 auto;
        }
        .list_title {
          height: 2rem;
        }
        .list_right_head {
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          -webkit-box-orient: vertical;
          box-orient: vertical;
          -webkit-box-pack: justify;
          -webkit-justify-content: space-between;
          justify-content: space-between;
          -webkit-box-align: center;
          -webkit-align-items: center;
          align-items: center;
        }
        .list_title {
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          -webkit-box-orient: vertical;
          box-orient: vertical;
          -webkit-flex-direction: column;
          flex-direction: column;
          -webkit-box-pack: justify;
          -webkit-justify-content: space-between;
          justify-content: space-between;
          -webkit-box-align: start;
          -webkit-align-items: flex-start;
          align-items: flex-start;
        }
        .list_titleS1 {
          font-size: 0.7rem;
        }
        .list_titleS2,.list_time {
          font-size: 0.6rem;
          color: #999;

        }
        .txt_img {
          font-size: 0;
          margin-top: 0.5rem;
        }
        .txt_img img {
          width: 32%;
          margin-right: 2%;
          display: inline-block;
        }
        .txt_img img:nth-of-type(3n) {
          margin-right: 0;
        }
        .comment_txt {
            color: #333;
            font-size: 0.7rem;
            padding-top: 0.5rem;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .content_borbot {
            border-bottom: 10px solid #f5f5f5;
        }
        .cp_content1 ul {
            padding: 0 0.5rem;
        }

        .cp_content1 ul li {
            border-bottom: 1px solid #e6e6e6;
            padding: 0.5rem 0;
        }
        .cp_content1 .aui-list-item-text {
            font-size: 0.6rem;
            color: #999;
        }
        .cp_content1 .aui-list-item .aui-list-item-inner,
        .sb div .aui-list-item-inner {
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-orient: vertical;
            box-orient: vertical;
            -webkit-flex-direction: column;
            flex-direction: column;
            -webkit-box-pack: justify;
            -webkit-justify-content: space-between;
            justify-content: space-between;
            -webkit-box-align: start;
            -webkit-align-items: flex-start;
            align-items: flex-start;
        }
        [v-vloak]{
          display: none;
        }

    </style>
</head>

<body>

    <div class="person_list" id="content" v-cloak>

      <div class="cp_content1 content_borbot" v-for="infoImg in listMsg">
        <ul>
            <!-- <li class="aui-list-item aui-list-item-middle" :style="{'border': infoImg.append_status==1 ? '':'none'}"> -->
            <li class="aui-list-item aui-list-item-middle" style="border: none">
                <div class="aui-media-list-item-inner" style="justify-content:space-between">
                    <div class="aui-list-item-media" style="margin-right:0.5rem;display:flex;">
                        <img :src=infoImg.headimg width="100%" class="aui-list-img-sm" style="width: 2rem;height:2rem">
                        <div style="margin-left:1rem;">
                          <div class="aui-list-item-title aui-font-size-14">{{infoImg.nickname}}</div>
                          <div class="list_titleS2" style="margin-top: 0.3rem">{{infoImg.fraction}}分</div>
                        </div>
                    </div>
                    <!-- <div class="aui-list-item-inner">
                        <div class="aui-list-item-text">
                            <div class="aui-list-item-title aui-font-size-14">{{infoImg.nickname}}</div>
                        </div>
                        <!-- <div class="aui-list-item-text">{{infoImg.posttime}}</div> -->
                    <!-- </div> -->
                    <div class="aui-list-item-right" style="font-size:0.6rem;color:#999;">{{infoImg.posttime}}</div>
                </div>
                <div class="comment_txt">
                    {{infoImg.content}}
                </div>
                <div class="comment_txt" >
                    <img :src=item style="width:2.5rem;height:2.5rem;display:inline-block" alt="" v-for="item in infoImg.pic">
                </div>

                <div style="background:#e6e6e6;border-radius:0.2rem;padding:0.2rem;display:flex;"  v-if="infoImg.reply_content!=''">
                    <div style="color:#999;font-size:0.7rem;margin-right:0.2rem;white-space:nowrap;">[商家回复]</div>
                    <span style="font-size:0.6rem;line-height:0.7rem">{{infoImg.reply_content}}</span>
                </div>
            </li>
        </ul>
        <ul v-if="infoImg.append_status==1">
            <li class="aui-list-item aui-list-item-middle" style="border:none">
                <div class="aui-media-list-item-inner" style="font-size:0.7rem;color:#f23030">
                  追加评价
                </div>
                <div class="comment_txt">
                    {{infoImg.append_content}}
                </div>
                <div class="comment_txt">
                    <img :src=val style="width:2.5rem;height:2.5rem;display:inline-block" alt="" v-for="val in infoImg.append_pic">
                </div>

                <div style="background:#e6e6e6;border-radius:0.2rem;padding:0.2rem;display:flex" v-if="infoImg.append_reply_content !=''">
                  <div style="color:#999;font-size:0.7rem;margin-right:0.2rem;white-space:nowrap;">[商家回复]</div>
                  <span style="font-size:0.6rem;line-height:0.7rem">{{infoImg.append_reply_content}}</span>
                </div>
            </li>
        </ul>
        <div style="width:100%;height:0.5rem;background:#f1f0f0" v-if="listMsg.length!=listMsg.length"></div>
      </div>
    </div>

</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript">
    apiready = function() {

        // 设置状态栏文字颜色
        api.setStatusBarStyle({
            style: 'dark'
        });

      var vm = new Vue({
        el:'#content',
          data:{
            page:1,
            totalpage:1,
            listMsg:[]
          },
          mounted:function(){
            this.getEvaluate()
            var $_this = this
            var scroll = new auiScroll({
                listen:true, //是否监听滚动高度，开启后将实时返回滚动高度
                distance:40 //判断到达底部的距离，isToBottom为true
            },function(ret){
                if (ret.isToBottom) {
                    $_this.page ++
                    if ($_this.page > $_this.totalpage) {
                        $_this.page = $_this.totalpage
                        console.log($_this.page)
                        return
                    }
                    api.ajax({
                        url: window.Url.Freegoods_evaluate,
                        method: 'post',
                        data: {
                            values: {
                              token:$api.getStorage('token'),
                              goodsId:api.pageParam.data,
                              sort:1,
                              page:_this.page
                            }
                        },
                        timeout: 300,
                    }, function(ret, err) {
                        if (ret) {
                            api.alert({ msg: JSON.stringify(ret) });
                            $_this.listMsg = $_this.listMsg.concat(ret.data.list)

                        } else {
                          api.toast({
                              msg: ret.info,
                              duration: 2000,
                              location: 'bottom'
                          });
                        }
                    })
                }
              })
          },
          methods:{
            //获取评论列表
            getEvaluate:function(){
              var _this = this;
              api.ajax({
                  url: window.Url.Freegoods_evaluate,
                  method: 'post',
                  data: {
                      values: {
                        token:$api.getStorage('token'),
                        goodsId:api.pageParam.data,
                        sort:1,
                        page:_this.page
                      }

                  }
              },function(ret, err){
                  if (ret.re ==1 ) {
                      _this.listMsg = ret.data.list
                      _this.totalpage = ret.data.sum_page
                      //console.log( JSON.stringify( ret ) );
                  } else {
                      //alert( JSON.stringify( err ) );
                      api.toast( {
                        msg:ret.info,
                        duration: 1000,
                        location: 'middle'
                      } );

                  }
              });

            }
          }
        })
    };



    // 关注以及取关
    $('body').on('click', '.follow_btn', function() {
        $(this).children('img').attr('src', '../../image/four/gz_success.png');
        $(this).children('span').text('关注成功');
        $('.follow_box').show(500);
    })

    // 取消关注
    $('body').on('click', '.follow_btn .btm_btn_box', function(ev) {
        console.log(1);
        $('.follow_btn').children('img').attr('src', '../../image/four/add_follow.png');
        $('.follow_btn').children('span').text('关注');
        $('.follow_box').hide();
        return false;
    })




    // 打开对应的聊天窗口
    function open_chat_win(type, target_name) {
        api.openWin({
            name: type + '_chat_header',
            url: 'four_headers/' + type + '_chat_header.html',
            pageParam: {
                target_name: target_name
            }
        });
    }
</script>

</html>
